$(function () {  
    var winH = $(window).height();  
    $("body").height(winH * 765 / 765);  
    $("#perimeter").height(winH * 765 / 765);  
  
    $(".reaction").height(winH * 382 / 765);  
  
    $(".rtbtn").height(winH * 382 / 765);//右侧的按钮  
  
  
    var canvas1 = document.getElementById("meter_canvas1");  
    var ctx1 = canvas1.getContext("2d");  
    ctx1.translate(0, 10);  
  
  
    var canvas2 = document.getElementById("meter_canvas2");  
    var ctx2 = canvas2.getContext("2d");  
    ctx2.translate(0, 10);  
  
    var canvas3 = document.getElementById("meter_canvas3");  
    var ctx3 = canvas3.getContext("2d");  
    ctx3.translate(0, 10);  
  
    var canvas4 = document.getElementById("meter_canvas4");  
    var ctx4 = canvas4.getContext("2d");  
    ctx4.translate(0, 10);  
  
    var canvas5 = document.getElementById("meter_canvas5");  
    var ctx5 = canvas5.getContext("2d");  
    ctx5.translate(0, 10);  
  
    var canvas6 = document.getElementById("meter_canvas6");  
    var ctx6 = canvas6.getContext("2d");  
    ctx6.translate(0, 10);  
  
    var img = new Image();  
    img.src = "img/zhizhen_03.png";  
  
  
  
    function circle(canvasId, photo) {  
        var canvas = document.getElementById(canvasId);  
        var borderwidth = 6;  
        var ctx = canvas.getContext("2d");  
        var degree = 0;  
        ctx.translate(144, 150);  
        ctx.rotate(-degree * Math.PI / 180);  
        ctx.save();  
        if (canvas.getContext) {  
            var circle = {  
                x: 0,//圆心的X坐标  
                y: 0,  
                r: 115 //圆的半径  
            };  
  
            //青色圈  
            ctx.beginPath();  
            ctx.lineWidth = borderwidth;  
            ctx.strokeStyle = "#2DC7C8";  
            ctx.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI, true);  
            ctx.stroke();  
            ctx.closePath();  
  
            //圆点  
            //ctx.beginPath();  
            //ctx.fillStyle = "#fff";  
            //ctx.arc(circle.x, circle.y, 2, 0, 2 * Math.PI, true);  
            //ctx.fill();  
            //ctx.closePath();  
  
            //写数字  
            for (var i = 0, angle = 2 * Math.PI / 2, tmp, len; i < 5; i++) {  
  
                ctx.beginPath();  
                //突出显示能被5整除的刻度  
                ctx.lineWidth = 3;  
                len = 25;  
                //刻度颜色  
                ctx.fillStyle = "#7D7D7D";  
  
                //圆有边框，要去除边框的高度  
                tmp = circle.r - 3;  
                ctx.moveTo(  
                    circle.x + tmp * Math.cos(angle),  
                    circle.y + tmp * Math.sin(angle)  
                    );  
                tmp -= len;  
                //字体的设置  
                ctx.font = "16px Calibri";  
                ctx.textAlign = "center";  
                ctx.textBaseline = "middle";  
                ctx.fillText(i * "<span style='color:#CC0000;'>50</span>", circle.x + tmp * Math.cos(angle), circle.y + tmp * Math.sin(angle));  
                ctx.closePath();  
  
                angle += Math.PI '<span style="color:#FF0000;">/4 </span>;//每次递增5/30π   //每个数字之间的距离  
            }  
  
        }  
    }  
    function circle2(canvasId, photo) {  
        var canvas = document.getElementById(canvasId);  
        var borderwidth = 6;  
        var ctx = canvas.getContext("2d");  
        var degree = 0;  
        ctx.translate(144, 150);  
        ctx.rotate(-degree * Math.PI / 180);  
        ctx.save();  
        if (canvas.getContext) {  
            var circle = {  
                x: 0,//圆心的X坐标  
                y: 0,  
                r: 115 //圆的半径  
            };  
  
            //青色圈  
            ctx.beginPath();  
            ctx.lineWidth = borderwidth;  
            ctx.strokeStyle = "#2DC7C8";  
            ctx.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI, true);  
            ctx.stroke();  
            ctx.closePath();  
  
          
            //写数字  
            for (var i = 0, angle = 2 * Math.PI / 2, tmp, len; i < 5; i++) {  
  
                ctx.beginPath();  
                //突出显示能被5整除的刻度  
                ctx.lineWidth = 3;  
                len = 25;  
                //刻度颜色  
                ctx.fillStyle = "#7D7D7D";  
  
                //圆有边框，要去除边框的高度  
                tmp = circle.r - 3;  
                ctx.moveTo(  
                    circle.x + tmp * Math.cos(angle),  
                    circle.y + tmp * Math.sin(angle)  
                    );  
                tmp -= len;  
                //字体的设置  
                ctx.font = "16px Calibri";  
                ctx.textAlign = "center";  
                ctx.textBaseline = "middle";  
                ctx.fillText(i * <span style="color:#FF0000;">105</span>, circle.x + tmp * Math.cos(angle), circle.y + tmp * Math.sin(angle));  
                ctx.closePath();  
  
                angle += Math.PI / 4;//每次递增5/30π   //每个数字之间的距离  
            }  
  
        }  
    }  
    //清除  
    var img = new Image();  
    img.src = "img/zhizhen_03.png";  
    function cleanpoint(canvasId, x, y) {  
        var canvas = document.getElementById("canvasId");  
        if (canvas.getContext("2d")) {  
            var ctx = canvas.getContext("2d");  
            ctx.clearRect(x, y, 72, 150);  
            context.drawImage(img, 0, 0);//绘制图片       
        }  
    }  
  
    var p1, p2, p3, p4, p5, p6;  
    <span style="color:#CC0000;">var degrees=3/7;</span>  
    function pointer1(angle) {  
       // alert(angle);  
        ctx1.clearRect(-5, 0, 20, -60);  
        ctx1.translate(0, 0);  
        <span style="color:#FF0000;">ctx1.rotate((90 - 0.9 * p1) * Math.PI / 180);  
        ctx1.rotate((-90 + 0.9 * angle) * Math.PI / 180);</span>  
        ctx1.clearRect(-5, 0, 50, 30);  
        ctx1.drawImage(img, 0 - 10, 0 - 62);//这里是指针的坐标，有时候旋转不是按照同一个点做旋转，需要调整位置  
       <span style="color:#CC0000;"> p1 = angle;</span>  
    }  
    function pointer2(angle) {  
        ctx2.clearRect(-5, 0, 20, -60);  
        ctx2.translate(0, 0);  
        ctx2.rotate((90 - 0.9 * p2) * Math.PI / 180);  
        ctx2.rotate((-90 + 0.9 * angle) * Math.PI / 180);  
        ctx2.clearRect(-5, 0, 50, 30);  
        ctx2.drawImage(img, 0 - 10, 0 - 62);  
        p2 = angle;  
    }  
    function pointer3(angle) {  
        ctx3.clearRect(-5, 0, 20, -60);  
        ctx3.translate(0, 0);  
        ctx3.rotate((90 - 0.9 * p3) * Math.PI / 180);  
        ctx3.rotate((-90 + 0.9 * angle) * Math.PI / 180);  
        ctx3.clearRect(-5, 0, 50, 30);  
        ctx3.drawImage(img, 0 - 10, 0 - 62);  
  
        p3 = angle;  
    }  
    function pointer4(angle) {  
        ctx4.clearRect(-5, 0, 20, -60);  
        ctx4.translate(0, 0);  
        ctx4.rotate((90 - degrees * p4) * Math.PI / 180);  
        ctx4.rotate((-90 + degrees * angle) * Math.PI / 180);  
  
        ctx4.clearRect(-5, 0, 50, 30);  
        ctx4.drawImage(img, 0 - 10, 0 - 62);  
  
        p4 = angle;  
    }  
    function pointer5(angle) {  
        ctx5.clearRect(-5, 0, 20, -60);  
        ctx5.translate(0, 0);  
        ctx5.rotate((90 - degrees * p5) * Math.PI / 180);  
        ctx5.rotate((-90 + degrees * angle) * Math.PI / 180);  
        ctx5.clearRect(-5, 0, 50, 30);  
        ctx5.drawImage(img, 0 - 10, 0 - 62);  
  
        p5 = angle;  
    }  
    function pointer6(angle) {  
        ctx6.clearRect(-5, 0, 20, -60);  
        ctx6.translate(0, 0);  
        ctx6.rotate((90 - degrees * p6) * Math.PI / 180);  
        ctx6.rotate((-90 + degrees * angle) * Math.PI / 180);  
        ctx6.clearRect(-5, 0, 50, 30);  
        ctx6.drawImage(img, 0 - 10, 0 - 62);  
  
        p6 = angle;  
    }  
    //function numbox(canvasId, x, y, fillcolor, text) {   //之所以不能这么写是因为在执行的时候执行了指针的方法，下面获取指针度数的方法也是canvas就不会再执行了，最好用div来写  
    //    var c1 = document.getElementById(canvasId);  
    //    var ctx = c1.getContext('2d');  
    //    if (c1.getContext) {  
    //        //盘下方的小方块  
    //        ctx.beginPath();  
    //        ctx.lineWidth = 1;  
    //        ctx.strokestyle = '#2CC6C8';  
  
    //        ctx.fillStyle = fillcolor;  
    //        ctx.fillRect(x, y - 24, 66, 24);//方块的位置  
    //        ctx.arc(x, y - 12, 12, 0.5 * Math.PI, 1.5 * Math.PI, false);  
    //        ctx.fillStyle = '#2CC6C8';  
    //        ctx.fill();  
    //        ctx.closePath();  
    //        ctx.beginPath();  
    //        ctx.arc(x + 66, y - 12, 12, 0.5 * Math.PI, 1.5 * Math.PI, true);  
    //        ctx.fillStyle = '#2CC6C8';  
    //        ctx.fill();  
  
    //        ctx.fillStyle = '#fff';  
    //        ctx.font = '18px  Microsoft YaHei';  
    //        ctx.fillText(text, 130, 250 - 24);//字的位置  
  
    //        ctx.stroke();  
    //        ctx.closePath();  
    //    }  
    //}  
    //盒子里面的文字  
    //function boxborder(canvasId, x, y, bordercolor) {  
    //    var c1 = document.getElementById(canvasId);  
    //    var ctx = c1.getContext('2d');  
    //    if (c1.getContext) {  
    //        //小方块里面的文字  
    //        ctx.beginPath();  
    //        ctx.strokeRect(x, y, 66, 28);  
    //        ctx.strokeStyle = bordercolor;  
    //        ctx.closePath();  
    //    }  
    //}  
    var t = Math.random() * 3000 + 5000;  
    window.onload = function () {  
        setInterval(function () {  
            var num = Math.floor(Math.random() * 200 );  
            var num2 = Math.floor(Math.random() * 200);  
            var num3 = Math.floor(Math.random() * 200);  
             var num4 = Math.floor(Math.random() * 420);  
             var num5 = Math.floor(Math.random() * 420);  
             var num6 = Math.floor(Math.random() * 420);  
            pointer1(num);  
             pointer2(num2);  
             pointer3(num3);  
             pointer4(num4);  
             pointer5(num5);  
             pointer6(num6);  
             $("#degrees1").html(num + "W");  
             $("#degrees2").html(num2 + "W");  
             $("#degrees3").html(num3 + "W");  
             $("#degrees4").html(num4 + "W");  
             $("#degrees5").html(num5 + "W");  
             $("#degrees6").html(num6 + "W");  
             $("#water1").html(num);  
             $("#water2").html(num2);  
             $("#water3").html(num3);  
             $("#water4").html(num4);  
             $("#water5").html(num5);  
             $("#water6").html(num6);  
              
        }, 1000);  
        
        //电流  
        circle('meter_canvas1', "img/pointer.png");  
        pointer1(420);  
        circle('meter_canvas2', "img/pointer.png");  
        pointer2(200);//这里可以修改指针的度数  
        circle('meter_canvas3', "img/pointer.png");  
        pointer3(10);//这里可以修改指针的度数  
  
        //电压  
        circle2('meter_canvas4', 'img/pointer.png');  
        pointer4(0);//这里可以修改指针的度数  
        circle2('meter_canvas5', "img/pointer.png");  
        pointer5(120);//这里可以修改指针的度数  
        circle2('meter_canvas6', "img/pointer.png");  
        pointer6(60);//这里可以修改指针的度数  
    }  
});  